<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"  isELIgnored="false"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="拖拽特效,表格拖拽,自由排序,表格排序,列排序,JS特效"/>
<link href="css/columnDrag.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#text1{
	transition:all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	
	border:#35a5e5 1px solid;
	border-radius:3px;
	outline:none;
	border:none;
	width:100%;
	height:30px;
}
#text2{
	transition:all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	
	border:#35a5e5 1px solid;
	border-radius:3px;
	outline:none;
	border:none;
	width:30px;
	height:30px;
}
#text1:focus ,#text2:focus{
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
</style>
<title>成绩查询</title>
</head>

<body  class="keBody">
<h1 class="keTitle">成绩查询</h1>
<div class="kePublic">
<!--效果html开始-->
<div id="chenkbox">
<div id = "headbox">
<span style="float:left;">年份：<select onchange = "alterMCladata()" id = "year">
<option value="0" >请选择</option>
 <c:forEach items="${year}" var="year" varStatus="status">
 <option value="${year}">${year}</option>
 </c:forEach>
 </select></span>
<span style="float:right;">学期：
<select class = "ui-choose" id = "uc_02" onchange = "alterMCladata()"> 
<option  value="1">大一上学期</option>
<option  value="2">大一下学期</option>
<option  value="3">大二上学期</option>
<option  value="4">大二下学期</option>
<option  value="5">大三上学期</option>
<option  value="6">大三下学期</option>
<option  value="7">大四上学期</option>
<option  value="8">大四下学期</option>
</select>
 </span>
</div>
<table id="tab11" style="display: none">
		<tbody>
			<tr>
				<td height="30" align="center">
					<input type="text" name="NO" size="2" value="1" readonly="readonly" style = "border:none" class="input_test"/></td>
				<td align="center">
					<input type="text" name="start_end_time" id = "text1" /></td>
				<td align="center">
				<select>
				<option  value="1">大一上学期</option>
<option  value="2">大一下学期</option>
<option  value="3">大二上学期</option>
<option  value="4">大二下学期</option>
				</select>
					</td>
				<td align="center">
					<input type="text" name="post" onkeyup="value=checkData(value);" id = "text2"/></td>
				<td>
					<input type="button" id="Button1" onClick="deltr(this)" value="删行" style = "border:none">
				</td>
			</tr>
		</tbody>
	</table>
<table id="tableSort" >
<thead>
    <tr id = "ft">
          <th onclick="sortTable('tableSort',0)" title="点击排序" style = "width:100px"> 题号 </th>
          <th title="点击排序"> 题目 </th>
          <th title="点击排序"> 类型 </th>
          <th title="点击排序"> 分值 </th>
          <th> <input type="button" id="btn_addtr" value="增行" style = "border:none"> </th>
        </tr>
        </thead>
        <tbody>
			<tr>
				<td height="30" align="center">
					<input type="text" name="NO" size="2" value="1" readonly="readonly" style = "border:none" class="input_test"/></td>
				<td align="center">
					<input type="text" name="start_end_time" id = "text1" /></td>
				<td align="center">
				<select>
					<option  value="1">大一上学期</option>
					<option  value="2">大一下学期</option>
					<option  value="3">大二上学期</option>
					<option  value="4">大二下学期</option>
				</select>
					</td>
				<td align="center">
					<input type="text" name="post" onkeyup="value=checkData(value);" id = "text2"/></td>
				<td>
					<input type="button" id="Button1" onClick="deltr(this)" value="删行" style = "border:none">
				</td>
			</tr>
		</tbody>
  </table>
  <input type="button" id="Button1" onClick="save()" value="保存" style = "border:none">
  <div id="box"></div>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="js/columnDrag.js"></script>
<script language="javascript" type="text/javascript">
$(function(){ 
	$('.input_test').bind({ 
	focus:function(){ 
	if (this.value == this.defaultValue){ 
	this.value=""; 
	} 
	}, 
	blur:function(){ 
	if (this.value == ""){ 
	this.value = this.defaultValue; 
	} 
	} 
	}); 
	}) 
function checkData(value)
{	
	var str = value.replace(/[^\d\.]/g, '');
	var pointIndex = str.search(/\./);
	
	if(-1 !== pointIndex)
	{
		str = str.substr(0, pointIndex + 1).replace(/\./, '.5') ;
	}
	return str;
}

$(function () {
	var show_count = 20;   //要显示的条数
	var count = 1;    //递增的开始值，这里是你的ID
	$("#btn_addtr").click(function () {

		var length = $("#dynamicTable tbody tr").length;
		//alert(length);
		if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
		{
			$("#tab11 tbody tr").clone().appendTo("#tableSort tbody");   //在表格后面添加一行
			changeIndex();//更新行号
		}
	});


});
function changeIndex() {
	var i = 1;
	$("#tableSort tbody tr").each(function () { //循环tab tbody下的tr
		$(this).find("input[name='NO']").val(i++);//更新行号
	});
}

function deltr(opp) {
	var length = $("#tableSort tbody tr").length;
	//alert(length);
	if (length <= 2) {
		alert("至少保留一行");
	} else {
		$(opp).parent().parent().remove();//移除当前行
		changeIndex();
	}
}
function save(){
	var table = document.getElementById("tableSort");
	// 获取 table 内的全部 input
	var textinputs = table.getElementsByTagName('input');
	var textselects = table.getElementsByTagName('select');
	alert(textselects[0].value);
	// 循环
	for(var i = 1; i < textinputs.length; i++) {
	// 将 textinput 的值置于 textinput 上一级 td 节点的下一个同级 td 节点中
	if(i%4 != 0)
	{
		alert(textinputs[i].value);
	}
	
	}
}
</script>
<!--效果html结束-->
</div>
</body>
</html>